<template>

    <div class="music_items">
        <div class="music_item music_day">
            <div class="MusicTitle">
                <el-text class="titleBigFont">{{ time_msg }}好,</el-text>
                <div class="titleMinFont"><el-text>猜你最近喜欢听</el-text></div>
                <div class="titleEnd"></div>
            </div>
            <div class="music_all_items"><!-- 这里未来分装成组件 -->
                <div class="music_item" v-for="i in day_music">
                    <div class="music_item_img" :style="i.style">
                        <div class="backg"></div>
                    </div>
                    <el-text truncated>{{ i.name }}</el-text>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, watch, ref } from 'vue'
import showimg from '@/views/music/img/music_img.jpg'

// 推荐列表,最好只有4个
let day_music = [
    {
        style: {
            background: 'url("' + showimg + '")',
        },
        name: "歌曲名"
    },
    {
        style: {
            background: 'url("' + showimg + '")',
        },
        name: "歌曲名"
    },
    {
        style: {
            background: 'url("' + showimg + '")',
        },
        name: "歌曲名"
    },
    {
        style: {
            background: 'url("' + showimg + '")',
        },
        name: "歌曲名"
    }
]
// day_music的初始化
for (let i = 0; i < day_music.length; i++) {
    day_music[i].style["background-size"] = "cover"
}


//实时时间单位
let Now_Date = reactive({ 'time': new Date() });
setInterval(() => {
    Now_Date.time = new Date();
}, 2000)
// 检测当前为上午，晚上还是下午,然后显示
let checkTime = (newValue) => {
    if (newValue.time.getHours() >= 6 && newValue.time.getHours() < 12) {
        return "上午";
    } else if (newValue.time.getHours() >= 12 && newValue.time.getHours() < 18) {
        return "下午";
    } else {
        return "晚上";
    }
}
let time_msg = ref(checkTime(Now_Date));
watch(Now_Date, (newValue) => {
    checkTime(newValue)
}
)

</script>

<style scoped>
.music_items {
    display: grid;
    margin-left: 5%;
    margin-right: 5%;
    height: 100%;

    .music_day {
        padding: 8px;
        border-radius: 8px;
        background: var(--music_day_bg);

        .MusicTitle {
            display: flex;
            justify-content: flex-start;
            align-items: end;
            margin-bottom: 2%;


            .titleBigFont {
                font-size: 1.2em;
                font-weight: 550;
            }

            .titleMinFont {
                margin-left: 2%;
                font-weight: 550;
            }
        }

        .music_all_items {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;

            .music_item {
                width: 20%;
                text-align: center;

                .music_item_img {
                    transition: all 0.28s;
                    border-radius: 6px;
                    padding: 1%;
                    margin-right: 0.5%;
                    margin-left: 0.5%;
                    margin-bottom: 2%;
                    width: 100%;
                    box-sizing: border-box;
                    border: 1px solid var(--music_item_img_border);

                    .backg {
                        padding-top: 100%;
                    }
                }

                .music_item_img:active {
                    transform: scale(1.1);
                }
            }

        }
    }
}
</style>